<template>
	<view>
		<view class="clerk">
			<view class="clek-cell">
				<view class="clek-title">昵称</view>
				<input type="text" v-model="nickname" placeholder="请输入昵称">
			</view>
			<view class="clek-cell">
				<view class="clek-title">性别</view>
				<radio-group class="gender " @change="radioChange">
					<label class="gender frame" v-for="(item, index) in gender">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="clek-cell">
				<view class="clek-title">年龄</view>
				<input type="text" v-model="age" placeholder="请输入年龄">
			</view>
			<view class="clek-cell">
				<view class="clek-title">微信</view>
				<input type="text" v-model="wechat" placeholder="请输入微信">
			</view>
			<view class="clek-cell">
				<view class="clek-title">手机号码</view>
				<input type="text" v-model="phone" placeholder="请输入手机号">
			</view>
			<view class="clek-cell">
				<view class="clek-title">相关经验</view>				
				<input type="text" v-model="exp" placeholder="是否有其他店铺经验">
			</view>
			<view class="clek-cell" @click="open()">
				<view class="clek-title" >所在地区</view>
				<input type="text" v-model="address" placeholder="请选择地址">
			</view>
			<cityPicker  :visible="visible" :defaultValue="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel"  />
			<view class="clek-cell">
				<view class="clek-title">简介</view>
				<textarea v-model="intro" auto-height placeholder="请填写简介" />
			</view>
			<view class="clek-cell">
				<view class="clek-title upload">上传图片</view>	
				<view class="imglistbx">
				  <view :class="['imglistItem',columnNum==3?'column3':'column4']" v-for="(item,index) in showList" :key='index'>
				    <image :src="item" class="itemImg" @click="previewImage(index)" mode="aspectFill"></image>
				    <icon size="18" type="cancel" class="cancelBtn" @click="deleteImg(index)" v-if="deleteBtn"></icon>
				  </view>
				  <!-- 上传控件 -->
				  <view :class="['imglistItem','upload-control',columnNum==3?'column3':'column4']" @click="uploadImg" v-if="showUploadControl">
				    <view class=" uploadControl">+</view>
					<view class="choiceimg">选择图片</view>
				  </view>
				  <view class="clear"></view>
				</view>
				<!-- <upload-img style="width: 100%;"></upload-img> -->
			</view>
			<view class="clek-cell">
				<view class="clek-title">上传音频</view>
				<view class="">
					<switch @change="switch2Change" color="#FF0000" style="transform:scale(0.9)"/>
					<view class="audio" v-if=" !ly">开始录音</view>
					<view class="audio" v-if="ly">上传音频</view>
				</view>							
			</view>
			<view class="read">
				<checkbox-group  @change="selfChangde">
					<label>
						<checkbox :checked="selfChecked"  />我已阅读并同意店员服务协议
					</label>
				</checkbox-group>
			</view>
			<view class="clerk-submit" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>	
import cityPicker from '../../../components/piaoyi-cityPicker/pioayi-cityPicker.vue'
	// import uploadImg from "../../../components/xiaohuang-uploadImg/uploadImg.vue"
	export default {
		// components:{ uploadImg },
		components:{
			cityPicker
		},
		props: {
		  //是否显示上传控件
		  control: {
		    type: Boolean,
		    default: true
		  },
		  //是否显示上删除按钮
		  deleteBtn: {
		    type: Boolean,
		    default: true
		  },
		  //行数量 
		  columnNum: {
		    type: [Number, String],
		    default: 4
		  },
		  //album 从相册选图，camera 使用相机
		  sourceType: {
		    type: Array,
		    default: function() {
		      return ['camera', 'album']
		    }
		  },
		  //最大上传数量
		  maxCount: {
		    type: [Number, String],
		    default: 9
		  },
		  //服务返回回调的图片数组--回填
		  mode: {
		    type: Array,
		    default: function() {
		      return []
		    }
		  }
		},
		data() {			
			return {
				title: 'picker',
				gender: [{
						name: '男',
						value:'1'
					},
					{
						name: '女',
						value:'2'
					},


				],
				current: 0,
				// 上传图片
				imgList: [],
				showList: [],
				showUploadControl: true,
				ly:false,
				
				nickname:'',
				sex:1,
				age:'',
				wechat:'',
				phone:'',
				exp:'',
				intro:'',
				images:'',
				recording:'',
				address:'',
				selfChecked:false,
				
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: ''
			}
		},
		onLoad() {

		},
		watch: {
		  mode(v) {
		    this.init(v)
		  },
		  control(v) {
		    this.showUploadControl = v
		  },
		},
		created() {
		  this.init(this.mode)
		},
		methods: {
			selfChangde(e) {
						this.selfChecked = !this.selfChecked;
					},

			open () {
				this.visible = true
			},
			confirm (val) {
				this.address = val.name
				this.visible = false
			},
			cancel () {
				this.visible = false
			},
			
			switch2Change: function (e) {
				this.ly=e.detail.value;
			    console.log('switch2 发生 change 事件，携带值为', e.detail.value)
			},
			radioChange(e){
				this.sex = e.detail.value
			},
			onchange(e) {
				const value = e.detail.value
			  },
			onnodeclick(node) {},
			init(v) {
			  if (this.mode.length != 0) {
			    this.showList = v;
			    return
			  };
			  this.showList = this.imgList;
			},
			// 上传图片
			uploadImg() {
			  uni.chooseImage({
			    sizeType: ['compressed'],
			    sourceType: this.sourceType,
			    count: this.maxCount,
			    success: (chooseImageRes) => {
			      const tempFilePaths = chooseImageRes.tempFilePaths;
				   uni.uploadFile({
		            url: '/api/index/upload',
		            filePath: tempFilePaths[0],
		            name: 'file',
		            header: {
		                'token': uni.getStorageSync('token'),
						// 'X-Requested-With':'XMLHttpRequest'
		            },
		            success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).data.src);
						   this.imgList.push(JSON.parse(uploadFileRes.data).data.src);
		            }
		        });
			   
			      this.isMaxNum();
			      this.$emit("chooseFile", this.imgList, tempFilePaths[0])
			    }
			  });
			},
			//删除图片
			deleteImg(eq) {
			  let getUrl = this.handleImg();
			  uni.showModal({
			    title: '提示',
			    content: '您确定删除吗？',
			    success: (res)=> {
			      if (res.confirm) {
			       getUrl.splice(eq, 1);
			       this.$emit("imgDelete", getUrl, eq);
			       this.isMaxNum();
			      }
			    }
			  });
			},
			// 预览图片
			previewImage(eq) {
			  let getUrl = this.handleImg();
			  uni.previewImage({
			    current: getUrl[eq],
			    urls: getUrl
			  })
			},
			//返回需要操作的图片数组
			//如果是回调了则操作回填后的数组 否则操作临时路径的图片数组
			handleImg() {
			  return this.mode.length > 0 ? this.showList : this.imgList
			},
			//判断图片数量是否已经到最大数量
			isMaxNum() {
			  if (this.imgList.length >= this.maxCount) {
			    this.showUploadControl = false
			  } else {
			    this.showUploadControl = true
			  }
			},
			ts(data){
				uni.showToast({
					title:data,
					icon:"none"
				})
			},
			submit(){
				// console.log(this.cb)
				if(!this.selfChecked){
					this.ts("请选择协议")
					return false
				}
				if(!this.nickname){
					this.ts("请输入昵称")
					return false
				}
				if(!this.sex){
					this.ts("请选择性别")
					return false
				}
				if(!this.age){
					this.ts("请输入年龄")
					return false
				}
				if(!this.wechat){
					this.ts("请输入微信")
					return false
				}
				if(!this.phone){
					this.ts("请输入手机号码")
					return false
				}
				const regex = /^1[3456789]\d{9}$/;//使用此正则即可
				if (!regex.test(this.phone)){
					this.ts("请输入正确手机号码")
					return false
				}
				this.$http.postReq("/api/user/beShoper", {
					nickname: this.nickname,
					sex:this.sex,
					age: this.age,
					wechat:this.wechat,
					phone:this.phone,
					exp:this.exp,
					intro:this.intro,
					images:this.images,
					recording:this.recording
				}).then(res => {
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				});
			}
		}
	}
</script>

<style>
	.clerk {
		padding: 22rpx 30rpx 50rpx;
	}

	.clek-cell {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F2F3F6;
	}

	.clek-title {
		width: 25%;
		font-size: 30rpx;
	}
	.clek-cell textarea{
		min-height: 76rpx;
	}
	.gender {
		display: flex;
		align-items: center;

	}

	.frame {
		margin-right: 40rpx;
	}
	.audio{
		border: 1rpx solid #C4C4C6;
		color: #606266;
		padding: 10rpx 20rpx;
		font-size: 20rpx;
		border-radius: 10rpx;
		margin-top: 40rpx;
		text-align: center;
	}
	.read{
		color: #909399;
		font-size: 35rpx;
	}
	.clerk-submit{
		padding: 20rpx 0;
		border: 1rpx solid #C4C4C6;
		border-radius: 10rpx;
		color: #606266;
		text-align: center;
		font-size: 40rpx;
		margin-top: 20rpx;
	}
	
	/* 上传  str */
	.imglistbx {
	  width: 100%;
	  height: 100%;
	}
	
	.imglistItem {
	  position: relative;
	  float: left;
	  margin-bottom: 20rpx;
	  border-radius: 10rpx;
	}
	
	.column3 {
	  width: 33.3333%;
	  height: 160rpx;
	}
	
	.column4 {
	  width: 25%;
	  height: 130rpx;
	}
	
	.itemImg {
	  width: 100%;
	  height: 100%;
	  margin: 0 auto;
	  display: block;
	  border-radius: 10rpx;
	}
	
	.cancelBtn {
	  position: absolute;
	  top: -10rpx;
	  right: 10rpx;
	}
	/* 上传图片 开始 */
	.upload{
		margin-right: 20rpx;
	}
	/* 上传图片 结束 */
	/* 上传控件 */
	.upload-control{
		background-color: #EEEEEE;
		height: 100rpx;
	}
	.uploadControl {
	  font-size: 50rpx;
	  color: #888;	  
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.choiceimg{
		font-size: 25rpx;
		background-color: #EEEEEE;
		text-align: center;
		padding: 20rpx 0;
	
	}
	
	/*  上传  str end*/
	.clear {
	  clear: both;
	}
</style>
